<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Blueprint Sample Page</title>

  <!-- Framework CSS -->
	<link rel="stylesheet" href="Blueprint/blueprint/screen.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="Blueprint/blueprint/print.css" type="text/css" media="print">
  <!--[if IE]><link rel="stylesheet" href="Blueprint/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

	
	<!-- Import fancy-type plugin for the sample page. -->
	<link rel="stylesheet" href="Blueprint/blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
</head>

<body>

<div class="container">
    <div class="span-24">
        <h1>VIPS Test</h1>
		<hr>
		<h2 class="alt">This sample page demonstrates a tiny fraction of what you get with Blueprint.</h2>

		<hr>
    </div>
    <div class="span-6">
		<h2>Sidebar</h2>
		<div class='widget-content'>
		<ul>
		<li><a href='http://www.google.com/'>Web Search</a></li>

		<li><a href='http://downloads.google.com/'>Downloads</a></li>
		<li><a href='http://images.google.com/'>Image Search</a></li>
		<li><a href='http://maps.google.com/'>Maps</a></li>
		<li><a href='http://labs.google.com/'>Labs</a></li>
		<li><a href='http://news.google.com/'>News</a></li>
		<li><a href='http://www.google.com/press/zeitgeist.html'>Zeitgeist</a></li>
		<li><a href='http://mobile.google.com/'>Mobile</a></li>
		<li><a href='http://www.google.com/options/'>More...</a></li>
		</ul></div>
	
	</div>
    <div class="span-12">
		<p><img src="Blueprint/tests/parts/test.jpg" class="top pull-1 left" alt="test">Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>. Nunc congue ipsum vestibulum libero. Aenean vitae justo. Nam eget tellus. Etiam convallis, est eu lobortis mattis, lectus tellus tempus felis, a ultricies erat ipsum at metus.</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Morbi et risus</a>. Aliquam nisl. Nulla facilisi. Cras accumsan vestibulum ante. Vestibulum sed tortor. Praesent <span class="caps">SMALL CAPS</span> tempus fringilla elit. </p>
    </div>
	
    <div class="span-6 last">
		<h2>Sidebar</h2>
		<div class='widget-content'>
		<ul>
		<li><a href='http://www.google.com/'>Web Search</a></li>

		<li><a href='http://downloads.google.com/'>Downloads</a></li>
		<li><a href='http://images.google.com/'>Image Search</a></li>
		<li><a href='http://maps.google.com/'>Maps</a></li>
		<li><a href='http://labs.google.com/'>Labs</a></li>
		<li><a href='http://news.google.com/'>News</a></li>
		<li><a href='http://www.google.com/press/zeitgeist.html'>Zeitgeist</a></li>
		<li><a href='http://mobile.google.com/'>Mobile</a></li>
		<li><a href='http://www.google.com/options/'>More...</a></li>
		</ul></div>
	
	</div>
    <div class="span-24">
        <div class="span-7 colborder">
		  <h6>Here's a box</h6>
		  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
		</div>

		<div class="span-8 colborder">
		  <h6>And another box</h6>

		  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat laboris nisi ut aliquip.</p>
		</div>
		
		<div class="span-7 last">
		  <h6>This box is aligned with the sidebar</h6>
		  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
		</div>
		<hr>

		<hr class="space">

    </div>	
    <div class="span-24">
        <p>Footer</p>
    </div>
</div>


</body>
</html>